<template>
  <!-- 头部banner区域 -->
  <div class="top_banner">
    <div class="main-container">
      <div class="top_banner_inner">
        <!-- 图标区域 -->
        <span class="top_banner_left">
          <img src="@/assets/img/logo.png" alt="" />
          <span>
            <span style="font-size: 24px">萌宠乐园</span>
            <span>Service for Dogs and Cats</span>
          </span>
        </span>
        <!-- 登录、注册区域 -->
        <span class="top_banner_user">
          <template v-if="userStore.userInfo.token == ''">
            <a @click="login">登录</a>
            <span>|</span>
            <a @click="register">注册</a>
          </template>
          <template v-else>
            <span @click="userStore.logout"
              >用户：{{ userStore.userInfo.username }}</span
            >
          </template>
        </span>
        <!-- 用户名 -->
        <div class="top_banner_info"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { useUserStore } from "@/store/user.js";
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "TopBanner",
    methods: {
      login() {
        this.$router.push("/login");
      },
      register() {
        this.$router.push("/register");
      },
    },
    setup() {
      const userStore = useUserStore();
      console.log(userStore.userInfo);
      return {
        userStore,
      };
    },
  });
</script>

<style scoped>
  /* top_banner */
  .top_banner {
    padding: 20px 0;
    height: 60px;
    background-color: #362526;
  }

  .top_banner_inner {
    margin: 0 auto;
    position: relative;
  }

  /* top_banner_left */
  .top_banner_left {
    height: 60px;
    width: 330px;
  }

  .top_banner_left img {
    height: 60px;
    width: 60px;
    vertical-align: top;
  }
  .top_banner_left span {
    height: 60px;
    width: 240px;
    padding: 2px 0;
    margin-left: 6px;
    display: inline-block;
    color: #ffffff;
  }
  .top_banner_left span span {
    height: 20px;
  }
  .tbl_block1 {
    position: absolute;
  }

  .tbl_block2 {
    top: 30px;
    left: 70px;
    position: absolute;
    width: 300px;
    color: white;
  }

  .top_banner_user {
    position: absolute;
    float: right;
    line-height: 60px;
    right: 0;
    color: #ffffff;
  }
  .top_banner_user a {
    color: #ffffff;
    padding: 0 2px;
  }
  .top_banner_user a:hover {
    color: #ff8622;
  }
  .top_banner_user span:hover {
    color: #ff8622;
  }
  .top_banner_user span {
    cursor: pointer;
  }
  .top_banner_info {
    position: absolute;
    right: 20px;
    top: 55px;
    font-size: 20px;
    color: #ffffff;
    display: none;
  }
  .top_banner_info a {
    color: #cccccc;
  }
</style>
